<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            margin 设置元素的外补白
            左右值为auto时 div水平方向会居中显示
            设置的外补白的值比空白小时，没有效果
            单位可以是px,em,rem, %(基于父元素宽度的百分比) 可以是负值

            margin-top      设置上边框的外补白
            margin-right    设置右边框的外补白
            margin-bottom   设置下边框的外补白
            margin-left     设置左边框的外补白
        */
        div{
            width: 200px;
            height: 200px;
            border: 10px solid red;
            padding: 10px;
            /* margin: 10px 20px; */
            margin-top: 10px;
            margin-right: 1em;
            margin-bottom: 1rem;
            margin-left: -10%;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>